<template>
	<div class="flex-row">
		<xbc-message-read v-if="message && message.createTime" :show="showReadStatus && !['group'].includes(message.conversationType) && isSenderThemselve" :isRead="isRead" />
		<xbc-loading v-if="!message.createTime"></xbc-loading>
		<image
			class="chat-message-image"
			:style="style" 
			:class="{reverse: isReverse && isSenderThemselve}"
			:src="thumbUrl"
			@tap="preview"/>
	</div>
</template>

<script>
import XBCIM from 'xbcim'
import mixins from '@/mixins'
import { messageProps } from '@/hooks/useMessage'

export default{
	mixins: [mixins],
	props: messageProps,
	data(){
		return {
			size: { width: 0, height: 0 }
		}
	},
	computed: {
		thumbUrl(){
			return this.messageContent.data?.thumbUrl || this.messageContent.data?.url
		},
		style(){
			const { width, height } = this.messageContent?.data
			if (!width || !height) {
				uni.getImageInfo({
					src: this.thumbUrl,
					success: ({ width: imgWidth, height: imgHeight }) => {
						this.size.width = imgWidth
						this.size.height = imgHeight
					}
				})
			} else {
				this.size.width = width
				this.size.height = height
			}
			
			return XBCIM.util.getImageSize(this.size.width, this.size.height, 200)
		}
	},
	methods: {
		preview(){
			uni.previewImage({
				urls: [this.messageContent?.data?.url]
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.chat-message-image {
	border-radius: 0 10rpx 10rpx 10rpx;

	&.reverse {
		border-radius: 10rpx 0 10rpx 10rpx;
	}
}
</style>